.tabs-nav-container {
  margin: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 4px 8px;
  overflow: hidden; /* 确保容器不会超出 */

  .custom-tabs {
    .ant-tabs-nav {
      margin: 0;

      &::before {
        border: none;
      }

      .ant-tabs-nav-wrap {
        /* 启用横向滚动 */
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin; /* Firefox */

        /* 自定义滚动条样式 */
        &::-webkit-scrollbar {
          height: 4px;
        }

        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 2px;

          &:hover {
            background: #a8a8a8;
          }
        }

        .ant-tabs-nav-list {
          /* 防止标签换行 */
          white-space: nowrap;
          flex-wrap: nowrap;
          .ant-tabs-tab {
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            margin: 0 4px 0 0;
            padding: 4px 32px 4px 12px; /* 右边留足够空间给删除按钮 */
            background: #fafafa;
            transition: all 0.2s ease;
            position: relative;
            flex-shrink: 0; /* 防止标签被压缩 */
            min-width: auto; /* 移除最小宽度限制 */
            max-width: none; /* 移除最大宽度限制，让标签自适应 */
            display: flex;
            align-items: center;

            &:hover {
              background: #f0f0f0;
              border-color: #d9d9d9;
              transform: translateY(-1px);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }

            &.ant-tabs-tab-active {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border-color: #667eea;
              color: #fff;
              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

              .tab-label {
                color: #fff;
                font-weight: 500;
              }

              .ant-tabs-tab-remove {
                color: #fff;

                &:hover {
                  color: #ffcccb;
                  background: rgba(255, 255, 255, 0.2);
                }
              }
            }

            .tab-label {
              font-size: 12px;
              color: #666;
              font-weight: 400;
              white-space: nowrap; /* 防止文字换行 */
              display: inline-block;
              vertical-align: middle;
              /* 不再限制宽度，让文字自然显示 */
            }

            .tab-label-wrapper {
              display: flex;
              align-items: center;
              gap: 4px;

              .cache-indicator {
                color: #52c41a;
                font-size: 8px;
                margin-left: 2px;
              }

              .refresh-icon {
                font-size: 10px;
                color: #999;
                cursor: pointer;
                padding: 2px;
                border-radius: 2px;
                transition: all 0.2s ease;

                &:hover {
                  color: #1890ff;
                  background: rgba(24, 144, 255, 0.1);
                }
              }
            }

            .ant-tabs-tab-remove {
              position: absolute;
              right: 8px;
              top: 50%;
              transform: translateY(-50%);
              color: #999;
              font-size: 10px;
              border-radius: 50%;
              width: 16px;
              height: 16px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.2s ease;

              &:hover {
                background: #f5f5f5;
                color: #ff4d4f;
              }
            }
          }
        }
      }
    }

    .ant-tabs-content-holder {
      display: none; // 隐藏内容区域，因为内容由路由渲染
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .tabs-nav-container {
    margin: 0;
    padding: 2px 4px;

    .custom-tabs {
      .ant-tabs-nav {
        .ant-tabs-nav-wrap {
          .ant-tabs-nav-list {
            .ant-tabs-tab {
              margin: 0 2px 0 0;
              padding: 3px 28px 3px 8px; /* 右边留空间给删除按钮 */
              min-width: auto; /* 移除最小宽度限制 */
              max-width: none; /* 移除最大宽度限制 */

              .tab-label {
                font-size: 11px;
                /* 移除最大宽度限制，让文字自适应 */
              }

              .ant-tabs-tab-remove {
                width: 14px;
                height: 14px;
                font-size: 9px;
                margin-left: 4px;
              }
            }
          }
        }
      }
    }
  }
}

// 标签动画效果
@keyframes tabSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.custom-tabs .ant-tabs-tab {
  animation: tabSlideIn 0.3s ease;
}

// 活跃标签的渐变动画
@keyframes activeGradient {
  0% {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  50% {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  }
  100% {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
}

.custom-tabs .ant-tabs-tab.ant-tabs-tab-active {
  animation: activeGradient 3s ease-in-out infinite;
}
